<template>
  <div>
    <h2>仓库库存清单</h2>
    <!-- 表单 -->
    <el-col :span="22"><div class="grid-content bg-purple">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="仓库查询">
          <el-select v-model="formInline.warehouseName" placeholder="全部">
            <el-option label="广州仓" value="广州仓"></el-option>
            <el-option label="湖北仓" value="湖北仓"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="formInline.warehouseStatus" placeholder="全部">
            <el-option label="正常" value="正常"></el-option>
            <el-option label="禁用" value="禁用"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div></el-col>
    <el-col :span="2"><div class="grid-content bg-purple">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-button type="primary" @click="onSubmit" >查询</el-button>
        </el-form-item>
      </el-form>
    </div></el-col><!-- 查询 -->
    <el-col :span="22"><div class="grid-content bg-purple"></div></el-col>
    <el-col :span="2"><div class="grid-content bg-purple">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div></el-col><!-- 重置 -->
    <!--表格-->
    <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column sortable prop="warehouseCode" label="仓库编码" width="300"></el-table-column>
      <el-table-column sortable prop="warehouseName" label="仓库名称" width="300"></el-table-column>
      <el-table-column sortable prop="shelfCount" label="货架数" width="300"></el-table-column>
      <el-table-column sortable prop="productCategory" label="商品类别" width="300"></el-table-column>
      <el-table-column sortable prop="totalStock" label="库存总数" width="300"></el-table-column>
      <el-table-column sortable prop="goodStock" label="良品数" width="300"></el-table-column>
      <el-table-column sortable prop="defectiveStock" label="次品数" width="300"></el-table-column>
      <el-table-column sortable prop="remarks" label="备注" width="300"></el-table-column>
      <el-table-column sortable prop="warehouseStatus" label="仓库状态" width="300"></el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparam" v-model="pageparam" @callFather="callFather"></Pagination>

  </div>
</template>

<script>
import Pagination from "../../components/Pagination";
import {warehouseInventoryList} from "../../api/warehouseInventoryMG";

export default {
  name: "warehouseInventory",
    data() {
    return {
      loading: false, //是显示加载
      listData: [], //用户数据
      formInline: {
        pageNum: 1,
        pageSize: 10,
        warehouseName: '',
        warehouseStatus:''
      },//下拉栏信息
      pageparam: {
        currentPage: 1,
        pageSize: 10,
        total: 10
      }, // 分页参数
    }
  },
  // 注册组件
  components: {
    Pagination
  },
  /**
   * 创建完毕   初始化数据 最好 在mounted初始
   */
  created() {
    this.getdata(this.formInline)
  },
  methods: {
    getdata(formInline) {
      console.log(formInline)
      /***
       * 调用接口，注释上面模拟数据 取消下面注释
       */
      warehouseInventoryList(formInline)
        .then(res => {  // 后端响应
          this.loading = false
          if (res.code != 20000) {
            this.$message({
              type: 'info',
              message: res.msg
            })
          } else {
            const pageInfo = res.data;  //先得到pageInfo   (pageHelper 中的分页信息)
            this.listData = pageInfo.list;
            // 分页赋值
            this.pageparam.currentPage = this.formInline.pageNum
            this.pageparam.pageSize = this.formInline.pageSize
            this.pageparam.total = pageInfo.total
            console.log(this.pageparam)
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error('用户信息加载失败，请稍后再试！')
        })
    },//刷新页面
    callFather(pageparam) {
      this.formInline.pageNum = pageparam.pageNum;
      this.formInline.pageSize = pageparam.pageSize;
      this.getdata(this.formInline)
    },//分页
    onSubmit() {
      console.log('submit!');
      this.getdata(this.formInline)

    },//查询
    resetForm() {
      this.formInline.warehouseName='';
      this.formInline.warehouseStatus='';
      this.getdata(this.formInline)
    },//重置
  }
}
</script>

<style scoped>
.bg-purple {
  background: #ffffff;
}
.grid-content {
  border-radius: 3px;
  min-height: 36px;
}
</style>
